<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-26 14:25:41
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-26 23:20:10
 * @FilePath: \shangyitong\src\pages\user\order\orderDetail\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-card class="box-card">
		<!-- 挂号详情   卡片头部结构 -->
		<template #header>
			<div class="detail">挂号详情</div>
		</template>
		<!-- 展示身体部分的顶部结构 -->
		<div class="top">
			<el-tag type="success">
				<div class="tag">
					<svg
						t="1750921815957"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="13654"
						width="16"
						height="16"
					>
						<path
							d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
							fill="#1afa29"
							p-id="13655"
						></path>
					</svg>
					<span>
						{{
							orderInfo.param?.orderStatusString ||
							'预约成功,待支付'
						}}</span
					>
				</div>
			</el-tag>
			<div class="right">
				<img src="@/assets/images/code_login_wechat.png" alt="" />
				<div class="r-title">
					<p>
						微信<svg
							t="1750923977054"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="15817"
							width="20"
							height="20"
						>
							<path
								d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
								fill="#09BB07"
								p-id="15818"
							></path>
						</svg>
						关注"北京114"预约挂号
					</p>
					<p>"快速预约挂号"</p>
				</div>
			</div>
		</div>
		<!-- 订单详情底部结构 -->
		<div class="bottom">
			<!-- 左侧展示订单详情信息 -->
			<div class="left">
				<el-descriptions class="margin-top" title="" :column="1" border>
					<!-- <template #extra>
						<el-button type="primary">Operation</el-button>
					</template> -->
					<el-descriptions-item width="120">
						<template #label>
							<div class="cell-item">
								<el-icon>
									<user />
								</el-icon>
								就诊信息
							</div>
						</template>
						{{ orderInfo.patientName || '鲁大海' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<iphone />
								</el-icon>
								就诊日期
							</div>
						</template>
						{{ orderInfo.reserveDate || '2023-06-10 下午' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<location />
								</el-icon>
								就诊医院
							</div>
						</template>
						{{ orderInfo.hosname || '北京人民医院' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<tickets />
								</el-icon>
								就诊科室
							</div>
						</template>
						<el-tag size="small">{{
							orderInfo.depname || '多发性硬化专科门诊'
						}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								医生职称
							</div>
						</template>
						{{ orderInfo.title || '副主任医师' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								服务费用
							</div>
						</template>
						<span style="color: red"
							>{{ orderInfo.amount || '100元' }}
						</span>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								挂号单号
							</div>
						</template>
						{{ orderInfo.outTradeNo || '111111111111111111111111' }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon>
									<office-building />
								</el-icon>
								挂号时间
							</div>
						</template>
						{{ orderInfo.createTime || '2023-06-15 10:52:17' }}
					</el-descriptions-item>
					<el-descriptions-item
						v-if="
							orderInfo.orderStatus == 0 ||
							orderInfo.orderStatus == 1
						"
					>
						<template #label>
							<div class="cell-item">
								<el-popconfirm
									title="确定取消预约?"
									@confirm="confirmEvent"
									@cancel="cancelEvent"
								>
									<template #reference>
										<el-button type="primary" :plain="true"
											>取消预约</el-button
										>
									</template>
								</el-popconfirm>
							</div>
						</template>
						<el-button
							type="primary"
							@click="openDialog"
                            
							v-if="orderInfo.orderStatus == 0"
							>支付</el-button
						>
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<div class="right">
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>注意事项</span>
						</div>
					</template>
					<p>
						1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
					</p>
					<p style="color: red">
						2.【取号】就诊当天需在{{
							orderInfo?.fetchTime || '2023-06-13 16:30'
						}}前 在医院取号，未取号视为爽约，该号不退不换；
					</p>
					<p>
						3.【退号】在{{
							orderInfo?.quitTime || '2023-06-13 16:30'
						}}前可在线退号 ，逾期将不可办理退号退费；
					</p>
					<p>
						4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
					</p>
					<p>
						5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
					</p>
				</el-card>
			</div>
		</div>
	</el-card>
	<!-- 展示支付二维码的结构 -->
	<!-- dialog 是通过 v-model 控制显示和隐藏的 true 是展示 false是隐藏 -->
	<div class="pay">
		<!-- 支付的结构 -->
		<el-dialog
			v-model="dialogVisible"
			title="微信支付"
			width="400"
			:close-on-click-modal="false"
            @close="closrDialog"
		>
			<!-- 支付需要使用的二维码图片 -->
			<div class="qrcode">
				<!-- <img src="../../../../assets/images/code_app.png" alt="" /> -->
				<img :src="qrCoceUrl" alt="" />
				<div class="b-title">
					<p>请使用微信扫一扫</p>
					<p>扫描二维码支付</p>
				</div>
			</div>

			<!-- 对话框底部结构插槽传递结构-->
			<template #footer>
				<div class="dialog-footer">
                    <!-- 关闭支付对话框 -->
					<el-button type="primary" @click="closrDialog" :plain="true">
						关闭窗口
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
//@ts-ignore
import QRCode from 'qrcode' //生成二维码插件
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { reqGetOrderInfo, reqOrderCancel,reqQrcode,reqQueryStatus } from '@/api/user/index'
import type { OrderResponseData,QrCode,PayResult } from '@/api/user/type'
import { ElMessage } from 'element-plus'
let $route = useRoute()
let orderInfo = ref<any>({
	orderStatus: 0,
})
//控制对话框的显示和隐藏  默认是隐藏的 false
let dialogVisible = ref<boolean>(false)
//定义支付微信二维码URL
let qrCoceUrl = ref<string>("")
//存储定时id
let timer = ref<number>()
onMounted(() => {
    getOrderInfo()
})
const getOrderInfo = async () => {
	let id = $route.query.orderId
	// let id = "431";
	let result: OrderResponseData = await reqGetOrderInfo(id as string)
	if (result.code == 200) {
		orderInfo.value = result.data
	}
}
//取消预约事件回调  订单状态 orderStatus -1 取消预约  0 预约但还未支付 1支付成功
const confirmEvent = async () => {
	try {
		let id = $route.query.orderId
		let result = await reqOrderCancel(id as string)
		if (result.code == 200) {
			ElMessage({
				type: 'success',
				message: '预约取消成功',
			})
			//重新获取一下订单详情
			getOrderInfo()
		} else {
			ElMessage({
				type: 'error',
				message: '预约取消失败',
			})
		}
	} catch (error) {}
}
//取消事件回调
const cancelEvent = () => {
	ElMessage({
		type: 'success',
		message: '订预约将继续',
	})
}
//关闭支付窗口
const closrDialog = ()=>{
    dialogVisible.value = false;
    //清除定时器
    clearInterval(timer.value)
}
//支付事件回调
const openDialog =async () => {
	//打开支付对话框
	dialogVisible.value = true;
   let id =  $route.query.orderId as string
  let result:QrCode = await reqQrcode(id)
  if(result.code==200){
    let imgUrl= result.data.codeUrl||"weixin://wxpay/bizpayurl?pr=6rI1fb7zz"
    //根据服务器返回的二维码信息生成二维码图片
    QRCode.toDataURL(imgUrl).then((url:any) => {
        // console.log(url)
        qrCoceUrl.value  = url
        //开始询问服务器当前这笔交易的支付结果
        if( qrCoceUrl.value){
            //只要二维码查询出来:需要每隔几秒的时间询问服务器是否支付成功
            timer.value= setInterval(async()=>{
              let result:PayResult = await reqQueryStatus(id);
              console.log("first",result)
              //如果服务器返回的数据data:true 代表支付成功
              if(result.data){               
                dialogVisible.value = false;
                ElMessage({
                    type:'success',
                    message:'订单支付成功!'
                })
                //清除定时器
                clearInterval(timer.value)
                //重新获取最新订单状态
                getOrderInfo()
              }
            },2000)
        }
    })
    .catch((err:any) => {
        console.error(err)
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-card__body) {
	padding: 10px;
}
::v-deep(.el-dialog__body) {
	border-top: 1px solid #7f7f7f;
	border-bottom: 1px solid #7f7f7f;
}
::v-deep(.el-dialog) {
	padding: 8px;
}
.box-card {
	.detail {
		color: #7f7f7f;
	}
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		.tag {
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				margin-left: 5px;
			}
		}
		.right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			img {
				width: 40px;
				height: 40px;
				margin: 5px;
			}
			.r-title {
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
				// align-items: flex-start;

				p {
					font-size: 13px;
					line-height: 20px;
				}
			}
		}
	}
	.bottom {
		display: flex;
		margin: 10px 0px;
		.left {
			flex: 4;
		}
		.right {
			flex: 6;
			margin-left: 20px;
			p {
				line-height: 33px;
			}
		}
	}
}
.pay {
	.qrcode {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 280px;
            height: 280px;
        }
        .b-title{
            text-align: center;
            line-height: 20px;
        }
	}
}
</style>
